<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-header">
      <view class="search-bar" @tap="goToSearch">
        <text class="iconfont icon-search"></text>
        <text class="placeholder">搜索目的地/景点</text>
        <button class="search-btn">搜索</button>
      </view>
      <!-- 城市标签 -->
      <scroll-view class="city-tags" scroll-x>
        <view class="tag-list">
          <view class="tag" :class="{ active: currentCity === '北京' }">北京</view>
          <view class="tag">故宫</view>
          <view class="tag">天安门</view>
          <view class="tag">温泉</view>
          <view class="tag">世界杯</view>
          <view class="tag">奥山公园</view>
        </view>
      </scroll-view>
    </view>

    <!-- 功能导航 -->
    <view class="nav-grid">
      <view class="nav-row">
        <view class="nav-item" @tap="navTo('亲子游')">
          <image src="http://114.55.56.174:19000/shzy/亲子游.gif" mode="aspectFit"></image>
          <text>亲子游</text>
        </view>
        <view class="nav-item" @tap="navTo('文化游')">
          <image src="http://114.55.56.174:19000/shzy/文化游.gif" mode="aspectFit"></image>
          <text>文化游</text>
        </view>
        <view class="nav-item" @tap="navTo('温泉游')">
          <image src="http://114.55.56.174:19000/shzy/温泉游.gif" mode="aspectFit"></image>
          <text>温泉游</text>
        </view>
        <view class="nav-item" @tap="navTo('周边游')">
          <image src="http://114.55.56.174:19000/shzy/周边游.gif" mode="aspectFit"></image>
          <text>周边游</text>
        </view>
      </view>
      <view class="nav-row">
        <view class="nav-item" @tap="navTo('旅游地图')">
          <image src="http://114.55.56.174:19000/shzy/旅游地图.png" mode="aspectFit"></image>
          <text>旅游地图</text>
        </view>
        <view class="nav-item" @tap="navTo('酒店民宿')">
          <image src="http://114.55.56.174:19000/shzy/酒店民俗.png" mode="aspectFit"></image>
          <text>酒店民宿</text>
        </view>
        <view class="nav-item" @tap="navTo('汽车票')">
          <image src="http://114.55.56.174:19000/shzy/汽车票.png" mode="aspectFit"></image>
          <text>汽车票</text>
          <view class="tag-hot">特惠</view>
        </view>
        <view class="nav-item" @tap="navTo('飞机票')">
          <image src="http://114.55.56.174:19000/shzy/飞机票.png" mode="aspectFit"></image>
          <text>飞机票</text>
          <view class="tag-hot">特惠</view>
        </view>
      </view>
    </view>

    <!-- 主题banner -->
    <view class="theme-banner">
      <image src="http://114.55.56.174:19000/shzy/banner.png" mode="aspectFill"></image>
    </view>

    <!-- 精选游记 -->
    <view class="section">
      <view class="section-header">
        <view class="location">
          <text class="icon-location"></text>
          <text>精选游记</text>
        </view>
        <text class="more" @tap="goToMore">更多</text>
      </view>
      <view class="content-list">
        <view class="content-item" v-for="(item, index) in randomArticles" :key="index" @tap="goToDetail(item)">
          <image :src="item.coverImage" mode="aspectFill"></image>
          <view class="info">
            <view class="title text-ellipsis-2">{{item.title}}</view>
            <view class="meta">
              <image class="avatar" :src="item.user.avatarUrl" mode="aspectFill"></image>
              <text class="name">{{item.user.nickname}}</text>
              <text class="views">{{item.views}}阅读</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加AI客服入口，放在首页合适位置 -->
    <view class="ai-assistant-entry" @click="goToAIChat">
      <image src="/static/images/客服.png" mode="aspectFill"></image>
      <view class="assistant-text">
        <view class="title">智能客服</view>
        <view class="desc">点击咨询</view>
      </view>
    </view>

  </view>
</template>

<script>
import { checkNeedLogin, isLoggedIn } from '@/utils/auth'

export default {
  data() {
    return {
      currentCity: '北京',
      randomArticles: [],
      contentList: [
        {
          image: '/static/images/content1.jpg',
          title: '和家人一起在北京住3天的神仙小院',
          author: '晚风心里吹',
          avatar: '/static/images/avatar.gif',
          views: '1.9'
        },
        {
          image: '/static/images/content2.jpg',
          title: '人少美美的西直门故宫修缮五年后保护开放',
          author: '蹦蹦虎了',
          avatar: '/static/images/avatar.gif',
          views: '1.1'
        }
      ]
    }
  },
  onLoad() {
    this.getRandomArticles();
  },
  methods: {
    getRandomArticles() {
      // 模拟API调用获取游记列表数据
      const articleData = {
        "records": [
          {
            "articleId": 6,
            "userId": 9,
            "title": "探索云南的美丽",
            "coverImage": "http://101.37.17.240:9000/shzy/云南.jpg",
            "content": "云南的风景令人陶醉，山水与文化交织，值得一游。",
            "views": 150,
            "likes": 30,
            "favorites": 20,
            "shares": 10,
            "createdAt": "2025-04-01T02:00:00.000+00:00",
            "updatedAt": "2025-04-09T22:51:57.000+00:00",
            "user": {
              "userId": 9,
              "username": "微信用户",
              "passwordHash": null,
              "email": "2832594226@qq.com",
              "phone": "13398909589",
              "avatarUrl": "http://101.37.17.240:9000/shzy/199076f2-35c7-4a08-840f-f9552d38d326ebb2ebe0eb8647608a700895f9020637.png",
              "nickname": "骚佳",
              "signature": "众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。",
              "createdAt": "2025-04-08T16:00:00.000+00:00",
              "updatedAt": "2025-04-09T22:49:21.000+00:00",
              "gender": "女",
              "faceLastUpdated": null,
              "wxOpenid": "oH81f7J9FzhlWnkGOcQPHzZye1FI",
              "wxUnionid": null,
              "wxSessionKey": "AWJ4Uw04udK1nY/si3LemQ==",
              "isBanned": 1,
              "banStartTime": "2025-03-31T16:00:00.000+00:00",
              "banEndTime": "2025-04-24T16:00:00.000+00:00",
              "faceFeature": null
            },
            "articleCommentsList": [
              {
                "commentId": 7,
                "articleId": 6,
                "userId": 9,
                "comment": "这篇游记写得很详细，感觉像是亲身经历过一样！",
                "likes": 8,
                "createdAt": "2025-04-01T02:10:00.000+00:00"
              },
              {
                "commentId": 12,
                "articleId": 6,
                "userId": 11,
                "comment": "云南的风土人情真的很吸引人，下一站就去那里！",
                "likes": 9,
                "createdAt": "2025-04-01T02:35:00.000+00:00"
              }
            ],
            "articleImagesList": [
              {
                "imageId": 1,
                "articleId": 6,
                "imageUrl": "http://101.37.17.240:9000/shzy/image1.jpg",
                "sortOrder": 1,
                "createdAt": "2025-04-09T23:00:00.000+00:00"
              }
            ]
          },
          {
            "articleId": 7,
            "userId": 11,
            "title": "福建的海边故事",
            "coverImage": "http://101.37.17.240:9000/shzy/福建.jpg",
            "content": "福建的海滩非常适合放松，蓝天白云，海浪拍打岸边。",
            "views": 200,
            "likes": 50,
            "favorites": 40,
            "shares": 20,
            "createdAt": "2025-04-02T03:00:00.000+00:00",
            "updatedAt": "2025-04-09T23:16:07.000+00:00",
            "user": {
              "userId": 11,
              "username": null,
              "passwordHash": null,
              "email": null,
              "phone": "13833685197",
              "avatarUrl": "http://101.37.17.240:9000/shzy/0cc1b1ca-35e8-43cb-991b-2132ebea2920.jpg",
              "nickname": "小梅",
              "signature": "面试造火箭工作拧螺丝",
              "createdAt": "2025-04-10T02:45:33.000+00:00",
              "updatedAt": "2025-04-09T22:14:10.000+00:00",
              "gender": "女",
              "faceLastUpdated": null,
              "wxOpenid": null,
              "wxUnionid": null,
              "wxSessionKey": null,
              "isBanned": 0,
              "banStartTime": null,
              "banEndTime": null,
              "faceFeature": null
            },
            "articleCommentsList": [
              {
                "commentId": 8,
                "articleId": 7,
                "userId": 10,
                "comment": "云南的景色真是美不胜收，真想立刻去旅行！",
                "likes": 12,
                "createdAt": "2025-04-01T02:15:00.000+00:00"
              }
            ],
            "articleImagesList": [
              {
                "imageId": 4,
                "articleId": 7,
                "imageUrl": "http://101.37.17.240:9000/shzy/image1.jpg",
                "sortOrder": 1,
                "createdAt": "2025-04-09T23:15:00.000+00:00"
              }
            ]
          },
          {
            "articleId": 8,
            "userId": 9,
            "title": "四川的美食之旅",
            "coverImage": "http://101.37.17.240:9000/shzy/四川.jpg",
            "content": "四川的麻辣美食让人上瘾，每一口都带着辛辣的刺激。",
            "views": 120,
            "likes": 25,
            "favorites": 30,
            "shares": 15,
            "createdAt": "2025-04-03T01:30:00.000+00:00",
            "updatedAt": "2025-04-09T23:08:02.000+00:00",
            "user": {
              "userId": 9,
              "username": "微信用户",
              "passwordHash": null,
              "email": "2832594226@qq.com",
              "phone": "13398909589",
              "avatarUrl": "http://114.55.56.174:19000/shzy/微信图片_20230130010118.jpg",
              "nickname": "辉明",
              "signature": "众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。",
              "createdAt": "2025-04-08T16:00:00.000+00:00",
              "updatedAt": "2025-04-09T22:49:21.000+00:00",
              "gender": "女",
              "faceLastUpdated": null,
              "wxOpenid": "oH81f7J9FzhlWnkGOcQPHzZye1FI",
              "wxUnionid": null,
              "wxSessionKey": "AWJ4Uw04udK1nY/si3LemQ==",
              "isBanned": 1,
              "banStartTime": "2025-03-31T16:00:00.000+00:00",
              "banEndTime": "2025-04-24T16:00:00.000+00:00",
              "faceFeature": null
            },
            "articleCommentsList": [],
            "articleImagesList": []
          }
        ]
      };

      // 随机选择两篇文章
      const articles = articleData.records;
      const shuffled = articles.sort(() => 0.5 - Math.random());
      const selected = shuffled.slice(0, 2);
      
      this.randomArticles = selected;
    },
    goToSearch() {
      uni.navigateTo({
        url: '/pages/search/index'
      })
    },
    navTo(type) {
      // 如果是游客，检查是否需要登录
      // 订票、预约等操作需要登录
      if(['酒店民宿', '汽车票', '飞机票'].includes(type)) {
        if(checkNeedLogin()) {
          return
        }
      }
      
      // 导航到对应页面
      console.log('导航到:', type)
      uni.navigateTo({
        url: `/pages/${this.getPagePath(type)}`
      })
    },
    getPagePath(type) {
      // 根据类型获取对应的页面路径
      const pathMap = {
        '亲子游': 'scenic/list?type=qinzi',
        '文化游': 'scenic/list?type=wenhua',
        '温泉游': 'scenic/list?type=wenquan',
        '周边游': 'scenic/list?type=zhoubian',
        '旅游地图': 'guide/map',
        '酒店民宿': 'hotel/list',
        '汽车票': 'guide/bus',
        '飞机票': 'guide/flight'
      }
      return pathMap[type] || 'index/index'
    },
    goToDetail(item) {
      // 将完整的文章数据存储到缓存中，方便详情页使用
      uni.setStorageSync('currentArticle', item);
      
      // 跳转到详情页，传递文章ID
      uni.navigateTo({
        url: `/pages/article/detail?id=${item.articleId}`
      })
    },
    goToMore() {
      uni.navigateTo({
        url: '/pages/article/list'
      })
    },
    goToAIChat() {
      uni.navigateTo({
        url: '/pages/message/ai-chat'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding-bottom: 100rpx;
}

.search-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #4080ff;
  padding: 20rpx 30rpx;

  .search-bar {
    display: flex;
    align-items: center;
    height: 72rpx;
    background: #fff;
    border-radius: 36rpx;
    padding: 0 30rpx;
    
    .icon-search {
      font-size: 32rpx;
      color: #999;
      margin-right: 10rpx;
    }
    
    .placeholder {
      flex: 1;
      font-size: 28rpx;
      color: #999;
    }

    .search-btn {
      width: 120rpx;
      height: 56rpx;
      line-height: 56rpx;
      background: #4080ff;
      color: #fff;
      font-size: 28rpx;
      border-radius: 28rpx;
    }
  }

  .city-tags {
    margin-top: 20rpx;
    white-space: nowrap;

    .tag-list {
      display: inline-flex;
      padding: 0 10rpx;
    }

    .tag {
      padding: 10rpx 30rpx;
      font-size: 28rpx;
      color: #fff;
      margin-right: 20rpx;

      &.active {
        background: rgba(255,255,255,0.2);
        border-radius: 30rpx;
      }
    }
  }
}

.nav-grid {
  background: #fff;
  padding: 30rpx;
  margin-top: 180rpx;

  .nav-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140rpx;

    image {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
    }

    text {
      font-size: 24rpx;
      color: #333;
    }

    .tag-hot {
      position: absolute;
      top: -10rpx;
      right: 0;
      background: #ff4d4f;
      color: #fff;
      font-size: 20rpx;
      padding: 2rpx 10rpx;
      border-radius: 10rpx;
    }
  }
}

.theme-banner {
  margin: 20rpx 30rpx;
  border-radius: 12rpx;
  overflow: hidden;

  image {
    width: 100%;
    height: 200rpx;
  }
}

.section {
  background: #fff;
  padding: 30rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .location {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;

      .icon-location {
        font-size: 36rpx;
        margin-right: 10rpx;
      }
    }

    .more {
      font-size: 24rpx;
      color: #999;
    }
  }

  .content-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10rpx;

    .content-item {
      width: calc(50% - 20rpx);
      margin: 10rpx;
      background: #fff;
      border-radius: 12rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 300rpx;
        border-radius: 12rpx 12rpx 0 0;
      }

      .info {
        padding: 16rpx;

        .title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 12rpx;
          line-height: 1.4;
        }

        .meta {
          display: flex;
          align-items: center;

          .avatar {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            margin-right: 10rpx;
          }

          .name {
            font-size: 24rpx;
            color: #666;
            margin-right: 20rpx;
          }

          .views {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}

.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #eee;

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;

    text {
      &:first-child {
        font-size: 40rpx;
        margin-bottom: 4rpx;
      }

      &:last-child {
        font-size: 24rpx;
      }
    }

    &.active {
      color: #4080ff;
    }
  }
}

.ai-assistant-entry {
  position: fixed;
  right: 30rpx;
  bottom: 140rpx;
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(138, 43, 226, 0.9);
  padding: 20rpx 30rpx;
  border-radius: 100rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
  
  image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  
  .assistant-text {
    color: #fff;
    
    .title {
      font-size: 28rpx;
      font-weight: bold;
    }
    
    .desc {
      font-size: 22rpx;
      opacity: 0.9;
    }
  }
}
</style> 